<template>
    <div class="limited">
        <el-row>
            <el-col :span="6">
                <div class="left-box">
                    <el-tabs v-model="box_index_key" @tab-click="handleClick">
                        <el-tab-pane v-for="(list_item, list_index) in box_list_arr" :key="'_list_index' + list_index"
                            :label="list_item.label" :name="list_item.name">
                            <div class="select-box flex_between">
                                <el-select size="mini" v-model="query.shipp_type" placeholder="配送方式"
                                    @change="selectFun">
                                    <el-option v-for="(sfee, ix_sfee) in sfee_list" :key="ix_sfee" :label="sfee.title"
                                        :value="sfee.id">
                                    </el-option>
                                </el-select>
                                <el-select style="margin: 0 5px;" size="mini" v-model="query.time" placeholder="请选择"
                                    @change="selectFun">
                                    <el-option v-for="(da, ix_data) in time_data" :key="ix_data" :label="da.name"
                                        :value="da.id">
                                    </el-option>
                                </el-select>
                                <el-select size="mini" v-model="query.storeid" placeholder="请选择" @change="selectFun">
                                    <el-option v-for="(item_yd, ix_yd) in stores_list" :key="ix_yd"
                                        :label="item_yd.name" :value="item_yd.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <LeftList ref="leftListRef" :templates="templates" :listData="listData"
                                :selectedIndex.sync="selectedIndex" :lLoading="lLoading" :lNoMore="lNoMore"
                                @loadFun="loadFun" @clickItem="clickItem">
                                <div slot-scope="{row}" slot="customer" class="flex_between"
                                    style="border-bottom: 1px solid #ede7e7;padding-bottom: 6px;">
                                    <div class="bold font_size16">
                                        <div v-if="query.type == 3">
                                            <span>{{ row.store || '未知' }}</span>
                                            <span class="ml10 mr10"> -> </span>
                                            <span>{{ row.store2 || '未知' }}</span>
                                        </div>
                                        <span v-else>
                                            {{ row.customer ? row.customer : row.cg_supp ? row.cg_supp : row.ck_supp ?
                                                row.ck_supp : '暂无单位名称' }}
                                        </span>
                                        <span v-if="row.customer_cp" class="ml5"> {{ row.customer_cp }}</span>
                                    </div>
                                    <span>{{ row.status_act.status_send_txt || '--' }}</span>
                                </div>
                                <div slot-scope="{row}" slot="no" class="flex_between">
                                    <div>
                                        <span>单&nbsp;&nbsp;&nbsp;号：</span>
                                        <span> {{ row.no || '--' }}</span>
                                    </div>
                                    <span v-if="row.atime_txt"> {{ row.atime_txt }}</span>
                                </div>
                                <div slot-scope="{row}" slot="odno_f" class="flex_between">
                                    <div v-if="row.st != 4 && query.type != 3">
                                        <span> 源单号： </span>
                                        <span> {{ row.odno_f || '--' }}</span>
                                    </div>
                                    <div>
                                        <span v-if="row.st == 4">类&nbsp;&nbsp;&nbsp;型：</span>
                                        <span v-else>类 型：</span>
                                        <span> {{ row.type_txt || '--' }}</span>
                                    </div>
                                </div>
                                <div slot-scope="{row}" slot="uname_cp" class="flex_between">
                                    <div>
                                        <span>经办人：</span>
                                        <span>{{ row.uname_cp || '--' }}</span>
                                    </div>
                                    <div class="flex_row">
                                        <div class="">
                                            <span>数 量：</span>
                                            <span> {{ Number(row.number).toFixed(0) || '--' }}</span>
                                        </div>
                                        <el-divider direction="vertical" v-if="row.st != 4"></el-divider>
                                        <div class="" v-if="row.st != 4">
                                            <span style="letter-spacing: 4px;"> {{titleTname}}：</span>
                                            <span> {{ Number(row.number_not).toFixed(0) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </LeftList>
                        </el-tab-pane>
                    </el-tabs>
                    <!-- <div class="iconBox">
                        <text class="icon-font search-icon" @click="addOrEdt">&#xe606;</text>
                    </div> -->
                </div>
            </el-col>
            <el-col :span="18">
                <div class="rigth-box">
                    <template v-if="isCartAddFrom">
                        <cartAddFrom ref="cartAddFromRef"></cartAddFrom>
                    </template>
                     <!-- <template v-if="isEdit">
                        <addOrEdit ref="addOrEditRef"></addOrEdit>
                    </template> -->
                    <template v-else>
                        <detaill ref="detaillRef"></detaill>
                    </template>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, nextTick,computed } from '@vue/composition-api'
import LeftList from "@/pages/warehouseManage/orderReceipt/components/leftList.vue"
import cartAddFrom from "@/pages/warehouseManage/orderReceipt/components/cartAddFrom.vue"
import detaill from "@/pages/warehouseManage/orderReceipt/components/detaill.vue"
import { useCommonHooks } from '@/hooks/useCommonHooks.js'
import { useOrderReceiptState } from '@/pages/warehouseManage/hooks/useOrderReceiptState.js'
const { proxy } = getCurrentInstance()
const {
    query,
    box_list_arr,
    box_index_key,
    tabType,
    isEdit,
    isCartAddFrom,
    addOrEdt,
    stores_list, // 仓库列表
    sfee_list,
    templates,
    listData,
    time_data,
    lLoading,
    lNoMore,
    detailID,
    selectedIndex,
    marketingAddRef,
    leftListRef,
    detaillRef,
    handleClick,
    selectFun,
    loadFun,
    clickItem,
    editStopTpBmFun,
    stopTpBmFun,
    initialize,
    resetFun
} = useOrderReceiptState()
const titleTname = computed(() => {
  return tabType.value == 'into_warehouse' ? '待入' :
    tabType.value == 'transfer_warehouse' ? '待调' :
      tabType.value == 'out_warehouse' ? '待出' : ''
})
onMounted(() => {
    proxy.$nextTick(() => {
        initialize()
    })
})
</script>

<style lang="scss" scoped>
div {
    box-sizing: border-box;
}

.limited {

    .left-box,
    .rigth-box {
        width: 100%;
        padding: 10px 10px 0 10px;
        height: 100vh;
        position: relative;
        border-right: 1px solid #e6e6e6;

        .iconBox {
            position: absolute;
            top: 0px;
            right: 13px;
            font-size: 26px;
            cursor: pointer;

            .search-icon {
                font-size: 20px;
                color: #333;
            }
        }

        .marketing-add {
            width: 100%;
        }
    }

    .status_txt {
        position: absolute;
        right: 20px;
        top: 33px;
    }

    .list_btn {
        position: absolute;
        bottom: 10px;
        right: 20px;
        z-index: 9;
    }
}
</style>